<template>
  <a-card hoverable class="hotelCard ant-col-xs-7 ant-col-lg-5 ant-col-xxl-3" >

    <img
          class="imgdisplay"
      alt="example"
      :src=" hotel.pic?'data:image/png;base64,'+hotel.pic:'https://z1.muscache.cn/im/pictures/9d95205a-6f34-4dfd-8831-35beb8b4da80.jpg?aki_policy=xx_large'"
      slot="cover"
      referrerPolicy="no-referrer"
    />
    <a-tooltip   placement="top">
      <a-card-meta  >
        <template  slot="title">
          <div class="hoteltitle">
            {{hotel.name}}
          </div>

        </template>
      <template slot="description">
        <div class="descfont">
          {{'地址：'+hotel.address}}
          <br>
          {{'联系方式：'+hotel.phoneNum}}
        </div>
        <div class="descfont">{{'酒店评分：'+hotel.rate}}分</div>
        <div class="descfont">星级：<a-rate style="font-size: 15px" :value="displayedStar()" disabled allowHalf/></div>
      </template>
    </a-card-meta>
    </a-tooltip>
  </a-card>

</template>
<script>

import Vue from "vue";
  export default {
  name:'',
  props: {
    hotel: {},

  },
  data() {
    return{

    }
  },
  methods:{
    displayedStar(){
      let myStar=this.hotel.hotelStar;
      let displaystar=5;
      if(myStar=='Five'){
        displaystar=5;
      }else if(myStar=='Four'){
        displaystar=4;
      }else if(myStar=='Three'){
        displaystar=3;
      }else if(myStar=='Two'){
        displaystar=2;
      }else if(myStar=='One'){
        displaystar=1;
      }
      return displaystar
    }
  }
}
</script>
<style scoped lang="less">
    .hotelCard {
        margin: 10px 10px;
        min-width: 300px;
        max-height: 450px;
        img {
          width: 100%;
          height: 230px;
        }
    }
</style>

<style lang="less">
.hotelCard{
  .ant-card-body{
    padding: 12px
  }
}
.hoteltitle{
  font-weight:bold;
  font-size:16px;
  color: #492929
}
.descfont{
  /*font-weight:bold;*/
  font-size:14px;
  color: #7B858B;
}
.ant-card-hoverable:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.4)
}

</style>
